<template>
  <div class="container">
    <!--<div class="breadcrumb-container">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="inner-container">
        <el-breadcrumb-item v-for="item in filelevel" :key="item.id">
          <a href="#" @click="list">{{item.path}}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>-->

    <div class="main-container">
      <div class="left-container">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-tree :data="data2" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-scrollbar>
      </div>
      <div class="main">

      </div>
    </div>

  </div>
</template>

<script>
  import SidebarItem from "../../layout/components/Sidebar/SidebarItem";
export default {
    components: { SidebarItem },
    data() {
        return {
            data2: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            filelevel: [
                {id: 1, path: '首页'},
                {id: 2, path: '活动管理'},
                {id: 3, path: '活动列表'},
                {id: 4, path: '活动详情'}
            ],
        }
    },
    methods: {
        list() {
            alert(123);
        },
        handleNodeClick(data) {
            console.log(data);
        }
    },
}
</script>

<style lang="scss" scoped>
  .container{

    .breadcrumb-container{
      background-color: #ffffff;
      padding: 20px 0 20px 10px;
    }
    .main-container{
      display: flex;
      flex-direction: row;
      margin-left: 0px !important;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .left-container{
    }
    .el-scrollbar{
      height: 100%;
    }
    .main{
      width: 100%;
    }
    .el-tree{
      &:hover {
        .el-tree-node__content {
          background: #89c2f7;
        }
      }
      .el-tree-node__content {
        background: #5daaf0;
      }
      .el-tree-node__children {
        overflow: visible !important;
      }
    }
  }


</style>
